import React, {useEffect,useState} from 'react';
import {Button, message, Modal, Skeleton} from "antd";
import ProForm, {ProFormSwitch, ProFormText} from "@ant-design/pro-form";
import {addSlide, editSlide, getSlideDetail} from "@/services/Slides";
import AliyunOssUpdate from "@/components/AliyunOssUpdate";
import {UploadOutlined} from "@ant-design/icons";

const CreateOrEdit = (props) => {
  const { visible,editId,showModal,refs} = props;

  const type = editId !== undefined ? "编辑" : "添加"

  const [formObj] = ProForm.useForm()
  const setIconKey = fileKey => formObj.setFieldsValue({'img':fileKey})

  // 初始化数据列表 定义设置状态
  const [initialValues,setInitialValues] = useState(undefined);

  // 更新 打开显示模态框 获取轮播数据
  useEffect(async () => {
    if (editId !== undefined) {
      const Detail = await getSlideDetail(editId)
      setInitialValues(Detail.data)
    }
  },[])
  // 执行添加
  const handleSubmit = async (data) => {
    console.log(data);
    if (data.id){
      const res = await editSlide(data.id,data)
      if (res.status == undefined){
        message.success("修改成功")
        showModal(false)
        refs.current.reload();
      }else{
        message.error('修改失败')
      }
    }else {
      const res = await addSlide(data)
      if (res.status == null){
        showModal(false)
        message.success("添加成功")
        refs.current.reload();
        showModal(false)
      }else{
        message.error('添加失败')
      }
    }
  }

  return (
      <Modal
      title={type +"列表"}
      visible={visible}
      onCancel={() => showModal(false)}
      footer={false}
      destroyOnClose={true}
    >
      {
        initialValues === undefined && editId  !== undefined ?  <Skeleton/> :
          <ProForm
            form={formObj}
            onFinish={(data) => handleSubmit(data)}
            initialValues={initialValues}>
            <ProFormText
              name="id"
              hidden={true}
            />
            <ProFormText
              label="名称"
              name="title"
              rules={[
                {
                  required: true
                }
              ]}
            />
            <ProFormText
              label="地址"
              name="url"
              rules={[
                {
                  required: true
                }
              ]}
            />
            <ProForm.Item
              name="img"
              label="轮播图片"
              rules={[
                {
                  required: true,
                  message: '上传图片',
                },
              ]}
            >
              <div>
                <AliyunOssUpdate
                  accept="image/*"
                  setIconKey={setIconKey}
                >
                  <Button icon={< UploadOutlined/>} >点击上传</Button>
                </AliyunOssUpdate>


              </div>
            </ProForm.Item>
            <ProFormSwitch
              label="状态"
              name="status"
              rules={[
                {
                  required: true
                }
              ]}
            />
            <ProFormText
              label="排序"
              name="seq"
              rules={[
                {
                  required: true
                }
              ]}
            />
          </ProForm>
      }

    </Modal>
  );
};

export default CreateOrEdit;
